<template>
    <div class="content">
        <div class="nav-list">
            <div class="step-list">
                <div
                    class="step-item"
                    :class="[
                        { active: activeStep === 0 },
                        { two: usableCycleType === null || usableCycleType === 0 },
                    ]"
                    @click="changeStep(0)"
                >
                    <img
                        class="image"
                        src="@/static/images/reserve/step0_front.png"
                        style="width: 308rpx"
                        v-if="activeStep === 0 && usableCycleType === 1"
                    />
                    <img
                        class="image"
                        src="@/static/images/reserve/step0_front.png"
                        style="width: 438rpx"
                        v-if="
                            activeStep === 0 && (usableCycleType === null || usableCycleType === 0)
                        "
                    />
                    <div class="inner">
                        <div class="circle">1</div>
                        填写信息
                    </div>
                </div>
                <div
                    class="step-item"
                    :class="{ active: activeStep === 1 }"
                    style="width: 190rpx"
                    @click="changeStep(1)"
                    v-if="usableCycleType === 1"
                >
                    <img
                        class="image"
                        src="@/static/images/reserve/step1_front.png"
                        style="width: 300rpx; left: -60rpx"
                        v-if="activeStep === 1"
                    />
                    <div class="inner">
                        <div class="circle">2</div>
                        签署协议
                    </div>
                </div>
                <div
                    class="step-item"
                    :class="[
                        { active: activeStep === 2 },
                        { two: usableCycleType === null || usableCycleType === 0 },
                    ]"
                >
                    <img
                        class="image"
                        src="@/static/images/reserve/step2_front.png"
                        style="width: 308rpx; left: -50rpx"
                        v-if="activeStep === 2 && usableCycleType === 1"
                    />
                    <img
                        class="image"
                        src="@/static/images/reserve/step2_front.png"
                        style="width: 438rpx; left: -100rpx"
                        v-if="
                            activeStep === 2 && (usableCycleType === null || usableCycleType === 0)
                        "
                    />
                    <div class="inner">
                        <div class="circle">
                            {{ usableCycleType === 1 ? '3' : '2' }}
                        </div>
                        确认预定
                    </div>
                </div>
            </div>
            <div class="hall-info" v-show="activeStep === 0 || activeStep === 2">
                <book-item :item="detail" />
            </div>
            <div class="contract-info" v-show="activeStep === 1">
                <contract ref="contract" :signPic="form.signPic" />
            </div>
        </div>
        <div class="reserve-form" v-show="activeStep === 0 || activeStep === 2">
            <u--form
                labelPosition="left"
                labelWidth="220rpx"
                :model="form"
                :rules="rules"
                ref="uForm"
            >
                <u-form-item
                    label="选择卡券"
                    :leftIcon="couponIcon"
                    prop="name"
                    required
                    @click="selectCard"
                    borderBottom
                >
                    <u--input
                        v-model="form.name"
                        border="none"
                        placeholder="请选择"
                        readonly
                        inputAlign="right"
                    ></u--input>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <u-form-item
                    label="预约日期"
                    labelPosition="top"
                    :leftIcon="timeIcon"
                    prop="startTime"
                    required
                    borderBottom
                >
                    <div class="time-select">
                        <p class="desc">
                            <img class="icon" src="@/static/images/common/waring.png" />
                            结束日期自动计算
                        </p>
                        <div class="date-time" @click="showTimePicker">
                            <div class="label">
                                <p>开始</p>
                                <p>日期</p>
                            </div>
                            <div class="text-area" style="width: 230rpx">
                                <div class="left">
                                    <div class="time" v-if="form.startTime">
                                        {{ (form.startTime || '').split(' ')[0] }}
                                    </div>
                                    <div class="time" v-if="form.startTime">
                                        {{ (form.startTime || '').split(' ')[1] }}
                                    </div>
                                    <p v-if="!form.startTime">开始日期</p>
                                </div>
                                <u-icon name="arrow-right" color="#909399" size="14"></u-icon>
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="date-time">
                            <div class="label">
                                <p>结束</p>
                                <p>日期</p>
                            </div>
                            <div class="text-area">
                                <div class="left">
                                    <div class="time">{{ (form.endTime || '').split(' ')[0] }}</div>
                                    <div class="time">{{ (form.endTime || '').split(' ')[1] }}</div>
                                    <p v-if="!form.endTime">结束日期</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </u-form-item>
                <u-form-item
                    label="区域桌号"
                    prop="seatName"
                    v-if="usableCycleType"
                    required
                    borderBottom
                    @click="toSeat"
                >
                    <u--input
                        v-model="form.seatName"
                        border="none"
                        readonly
                        placeholder="请选择"
                        inputAlign="right"
                    ></u--input>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
            </u--form>
            <div class="rules" v-if="activeStep === 2">
                <div class="desc" v-if="reserveSeatTip && reserveSeatTip.length > 0">
                    <p v-for="(item, index) in reserveSeatTip" :key="index">{{ item }}</p>
                </div>
                <div class="check-rule">
                    <div class="tips" v-if="!checked">
                        <img class="image" src="@/static/images/reserve/tips.png" />
                        <p class="agree">请点选阅读同意《研习室公约》和《免责承诺书》</p>
                    </div>
                    <u-radio-group v-model="checked">
                        <u-radio :size="12" labelSize="24rpx" label="我已阅读并同意" name="agree">
                        </u-radio>
                        <span class="rule" @click="isShowRule = true">研习室公约、免责承诺书</span>
                    </u-radio-group>
                </div>
            </div>
        </div>
        <phone-call v-if="activeStep === 0 || activeStep === 2" :phoneNumber="detail.phone" />

        <div class="footer-bar">
            <div class="submit-reserve" v-if="activeStep === 2">
                <p class="total">
                    共计
                    <template v-if="usableCycleDay > 0"
                        ><span class="num">{{ usableCycleDay }}</span
                        >天</template
                    >
                    <template v-if="usableCycleHour > 0"
                        ><span class="num">{{ usableCycleHour }}</span
                        >小时</template
                    >
                </p>
                <div class="btn-group">
                    <u-button
                        color="#5428EC"
                        plain
                        size="normal"
                        text="上一步"
                        :customStyle="{
                            width: '220rpx',
                            margin: 0,
                            marginRight: '20rpx',
                        }"
                        @click="lastStep"
                    ></u-button>
                    <u-button
                        color="#5428EC"
                        size="normal"
                        text="确定预约"
                        :customStyle="{
                            width: '220rpx',
                            margin: 0,
                        }"
                        @click="submitReserve"
                    ></u-button>
                </div>
            </div>
            <template v-else>
                <u-button
                    v-if="activeStep === 1"
                    color="#5428EC"
                    plain
                    size="normal"
                    text="上一步"
                    :customStyle="{
                        width: '49%',
                        margin: 0,
                    }"
                    @click="lastStep"
                ></u-button>
                <u-button
                    color="#5428EC"
                    size="normal"
                    text="下一步"
                    :customStyle="{
                        width: activeStep === 0 ? '100%' : '49%',
                        margin: 0,
                    }"
                    @click="nextStep"
                ></u-button>
            </template>
        </div>
        <u-datetime-picker
            :key="form.reserveStartTime"
            :show="isShowTimePicker"
            v-model="form.reserveStartTime"
            mode="datetime"
            :min-date="currentDate"
            close-on-click-overlay
            @close="isShowTimePicker = false"
            @cancel="isShowTimePicker = false"
            @confirm="onStartTimeConfirm"
        ></u-datetime-picker>

        <u-popup :show="isShowCard" closeable :round="24" @close="isShowCard = false">
            <div class="card-popup">
                <div class="title">
                    <img class="icon" src="@/static/images/room/coupon.png" />
                    选择卡券（可多选）
                </div>
                <div class="card-list">
                    <u-checkbox-group
                        v-model="checkCardValue"
                        @change="onCardChange"
                        placement="column"
                        shape="circle"
                    >
                        <div class="card-container" v-for="item in cardList" :key="item.id">
                            <div class="select">
                                <u-checkbox :customStyle="{ margin: 0 }" :name="item.id">
                                </u-checkbox>
                            </div>
                            <div class="right">
                                <card-item :item="item" />
                            </div>
                        </div>
                    </u-checkbox-group>
                </div>
                <div class="footer">
                    <p class="text">
                        已选<span class="num">{{ checkCardValue.length }}</span
                        >张卡
                    </p>
                    <u-button
                        color="#5428EC"
                        size="normal"
                        text="确认"
                        @click="confirmCardSelect"
                        :disabled="checkCardValue.length === 0"
                        :customStyle="{ width: '252rpx', margin: 0 }"
                    ></u-button>
                </div>
            </div>
        </u-popup>
        <u-popup :show="isShowRule" closeable :round="24" @close="isShowRule = false">
            <div class="rule-popup">
                <div class="title">
                    <img class="icon" src="@/static/images/common/time.png" />
                    研习室公约/免责承诺书
                </div>
                <div class="rule-list">
                    <p class="head">聚人研习室研习室公约</p>
                    <div class="rule-content">
                        <p class="rule-item" v-for="(item, index) in convention" :key="index">
                            {{ item }}
                        </p>
                    </div>
                    <p class="head">免责承诺书</p>
                    <div class="rule-content">
                        <p class="rule-item" v-for="(item, index) in disclaimer" :key="index">
                            {{ item }}
                        </p>
                    </div>
                </div>
            </div>
        </u-popup>
    </div>
</template>

<script>
import dayjs from 'dayjs';
import couponIcon from '@/static/images/room/coupon.png';
import timeIcon from '@/static/images/common/time.png';
import BookItem from '@/components/BookItem';
import PhoneCall from '@/components/PhoneCall';
import CardItem from '@/components/CardItem';
import Contract from './components/Contract';
export default {
    name: 'settle',
    components: {
        BookItem,
        PhoneCall,
        CardItem,
        Contract,
    },
    data() {
        return {
            couponIcon,
            timeIcon,
            id: null,
            activeStep: 0,
            form: {
                name: null,
                userCardIds: [],
                startTime: null,
                reserveStartTime: null,
                endTime: null,
                reserveEndTime: null,
                seatId: null,
                seatName: null,
                signPic: null,
                protocolTemplateId: null,
            },
            rules: {
                name: {
                    type: 'string',
                    required: true,
                    message: '请选择卡券',
                    trigger: ['blur', 'change'],
                },
                startTime: {
                    type: 'string',
                    required: true,
                    message: '请选择预约日期',
                    trigger: ['blur', 'change'],
                },
                seatName: {
                    type: 'string',
                    required: true,
                    message: '请选择桌号',
                    trigger: ['blur', 'change'],
                },
            },
            tempForm: {
                name: '',
                userCardIds: [],
                usableCycleHour: 0,
                usableCycleDay: 0,
                usableCycleType: null,
                seatTypeIds: [],
            },
            usableCycleHour: 0,
            usableCycleDay: 0,
            usableCycleType: null,
            currentDate: Number(new Date()),
            isShowTimePicker: false,
            isShowCard: false,
            isShowRule: false,
            seatTypeIds: [],
            cardList: [],
            checkCardValue: [],
            checked: null,
            detail: {},
            isFirst: true,
            disclaimer: '',
            convention: '',
            reserveSeatTip: '',
        };
    },
    onLoad(options) {
        this.id = Number(options.id);
        if (options.cardId) {
            let startTime = dayjs().format('YYYY-MM-DD HH:mm');
            this.$set(this.form, 'startTime', startTime);
            this.$set(
                this.form,
                'reserveStartTime',
                new Date(startTime.replaceAll('-', '/')).getTime(),
            );
        }
        if (options && options.id) {
            this.getHallDetail(options.id, options.cardId);
        }
        if (options.cardId) {
            this.checkCardValue = [Number(options.cardId)];
            this.$Api.member.card
                .list({
                    studyhallId: this.id,
                    queryType: 1,
                })
                .then(res => {
                    res.forEach(item => {
                        if (Number(options.cardId) === item.id) {
                            this.form.name = item.name;
                            this.form.userCardIds = [item.id];
                            if (item.usableCycleType === 0) {
                                this.usableCycleHour = item.usableCycle;
                            }
                            if (item.usableCycleType === 1) {
                                this.usableCycleDay = item.usableCycle;
                            }
                            if (item.canSelectSeat) {
                                this.usableCycleType = 1;
                            } else {
                                this.usableCycleType = 0;
                            }
                            this.seatTypeIds = (item.applySeatTypes || []).map(e => {
                                return e.id;
                            });
                            this.tempForm.name = item.name;
                            this.tempForm.userCardIds = [item.id];
                            this.tempForm.usableCycleHour = this.usableCycleHour;
                            this.tempForm.usableCycleDay = this.usableCycleDay;
                            this.tempForm.usableCycleType = this.usableCycleType;
                            this.tempForm.seatTypeIds = this.seatTypeIds;
                        }
                    });
                    let endTime = dayjs()
                        .add(this.usableCycleDay, 'day')
                        .add(this.usableCycleHour, 'hour')
                        .format('YYYY-MM-DD HH:mm');
                    this.$set(this.form, 'endTime', endTime);
                    this.$set(
                        this.form,
                        'reserveEndTime',
                        new Date(endTime.replaceAll('-', '/')).getTime(),
                    );
                });
        }
        uni.$on('on-seat-select', this.onSeatSelect);
        uni.$on('sign-finish', this.signFinish);
        uni.$on('on-card-refresh', this.onCardRefresh);
    },
    onUnload() {
        uni.$off('on-seat-select', this.onSeatSelect);
        uni.$off('sign-finish', this.signFinish);
        uni.$off('on-card-refresh', this.onCardRefresh);
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
    methods: {
        onCardRefresh() {
            this.$Api.member.card
                .list({
                    studyhallId: this.id,
                    queryType: 1,
                })
                .then(res => {
                    if (res.length > 0) {
                        this.form.name = res[0].name;
                        this.form.userCardIds = [res[0].id];
                        if (res[0].usableCycleType === 0) {
                            this.usableCycleHour = res[0].usableCycle;
                        }
                        if (res[0].usableCycleType === 1) {
                            this.usableCycleDay = res[0].usableCycle;
                        }
                        this.usableCycleType = res[0].usableCycleType;
                        this.seatTypeIds = (res[0].applySeatTypes || []).map(s => {
                            return s.id;
                        });

                        let startTime = dayjs().format('YYYY-MM-DD HH:mm');
                        this.$set(this.form, 'startTime', startTime);
                        this.$set(
                            this.form,
                            'reserveStartTime',
                            new Date(startTime.replaceAll('-', '/')).getTime(),
                        );
                        let endTime = dayjs()
                            .add(this.usableCycleDay, 'day')
                            .add(this.usableCycleHour, 'hour')
                            .format('YYYY-MM-DD HH:mm');
                        this.$set(this.form, 'endTime', endTime);
                        this.$set(
                            this.form,
                            'reserveEndTime',
                            new Date(endTime.replaceAll('-', '/')).getTime(),
                        );

                        this.replaceTime();
                    }
                });
        },
        getHallDetail(id) {
            let longitude = getApp().globalData.longitude;
            let latitude = getApp().globalData.latitude;
            this.$Api.study.main
                .get({
                    longitude,
                    latitude,
                    id,
                })
                .then(res => {
                    this.detail = res;
                    this.replaceTime();
                });
        },
        replaceTime() {
            let time = this.formatDay(this.form.reserveStartTime);
            this.disclaimer = (this.detail.disclaimer || '')
                .replace(/\${time}/gi, time)
                .split('\n');
            this.convention = (this.detail.convention || '')
                .replace(/\${time}/gi, time)
                .split('\n');
            this.reserveSeatTip = (this.detail.reserveSeatTip || '')
                .replace(/\${time}/gi, time)
                .split('\n');
        },
        onStartTimeConfirm() {
            this.isShowTimePicker = false;
            setTimeout(() => {
                let startTime = dayjs(this.form.reserveStartTime).format('YYYY-MM-DD HH:mm');
                this.$set(this.form, 'startTime', startTime);
                let endTime = dayjs(startTime)
                    .add(this.usableCycleDay, 'day')
                    .add(this.usableCycleHour, 'hour')
                    .format('YYYY-MM-DD HH:mm');
                this.$set(this.form, 'endTime', endTime);
                this.$set(
                    this.form,
                    'reserveEndTime',
                    new Date(endTime.replaceAll('-', '/')).getTime(),
                );
                this.replaceTime();
            }, 500);
        },
        selectCard() {
            if (this.activeStep === 2) {
                return false;
            }
            this.$Api.member.card
                .list({
                    studyhallId: this.id,
                    queryType: 1,
                })
                .then(res => {
                    if (res.length === 0) {
                        uni.setStorageSync('delta', 4);
                        uni.navigateTo({
                            url: '/pages/coupon/empty?id=' + this.id,
                        });
                        return false;
                    }
                    this.cardList = res;
                    this.isShowCard = true;
                });
        },
        onCardChange(val) {
            let obj = {};
            let name = [];
            let userCardIds = val;
            let usableCycleHour = 0;
            let usableCycleDay = 0;
            let usableCycleType = [];
            let seatTypeIds = [];
            let canSelectSeat = false;
            this.cardList.forEach(e => {
                if (userCardIds.includes(e.id)) {
                    if (!obj[e.name]) {
                        obj[e.name] = 1;
                    } else {
                        obj[e.name] = obj[e.name] + 1;
                    }
                    if (e.usableCycleType === 0) {
                        usableCycleHour = usableCycleHour + e.usableCycle;
                    }
                    if (e.usableCycleType === 1) {
                        usableCycleDay = usableCycleDay + e.usableCycle;
                    }
                    usableCycleType.push(e.usableCycleType);
                    seatTypeIds = seatTypeIds.concat(
                        (e.applySeatTypes || []).map(s => {
                            return s.id;
                        }),
                    );
                    if (e.canSelectSeat) {
                        canSelectSeat = true;
                    }
                }
            });
            if (usableCycleHour > 23) {
                usableCycleDay = usableCycleDay + parseInt(usableCycleHour / 24);
                usableCycleHour = usableCycleHour % 24;
            }
            Object.keys(obj).forEach(key => {
                name.push(key + '×' + obj[key]);
            });
            this.tempForm.name = name.join('、');
            this.tempForm.userCardIds = userCardIds;
            this.tempForm.usableCycleHour = usableCycleHour;
            this.tempForm.usableCycleDay = usableCycleDay;
            this.tempForm.usableCycleType = canSelectSeat ? 1 : 0;
            this.tempForm.seatTypeIds = Array.from(new Set(seatTypeIds));
        },
        confirmCardSelect() {
            this.form.name = this.tempForm.name;
            this.form.userCardIds = this.tempForm.userCardIds;
            this.usableCycleHour = this.tempForm.usableCycleHour;
            this.usableCycleDay = this.tempForm.usableCycleDay;
            this.usableCycleType = this.tempForm.usableCycleType;
            this.seatTypeIds = this.tempForm.seatTypeIds;

            let startTime = null;
            if (this.form.startTime) {
                startTime = dayjs(this.form.startTime).format('YYYY-MM-DD HH:mm');
            } else {
                startTime = dayjs().format('YYYY-MM-DD HH:mm');
            }
            this.$set(this.form, 'startTime', startTime);
            this.$set(
                this.form,
                'reserveStartTime',
                new Date(startTime.replaceAll('-', '/')).getTime(),
            );
            let endTime = dayjs(startTime)
                .add(this.usableCycleDay, 'day')
                .add(this.usableCycleHour, 'hour')
                .format('YYYY-MM-DD HH:mm');
            this.$set(this.form, 'endTime', endTime);
            this.$set(
                this.form,
                'reserveEndTime',
                new Date(endTime.replaceAll('-', '/')).getTime(),
            );
            this.replaceTime();
            this.isShowCard = false;
        },
        showTimePicker() {
            if (this.activeStep === 2) {
                return false;
            }
            if (!this.form.name) {
                uni.showToast({
                    title: '请先选择卡券',
                    icon: 'none',
                });
                return false;
            }
            this.isShowTimePicker = true;
        },
        toSeat() {
            if (this.activeStep === 2) {
                return false;
            }
            if (!this.form.name) {
                uni.showToast({
                    title: '请先选择卡券',
                    icon: 'none',
                });
                return false;
            }
            if (!this.form.startTime) {
                uni.showToast({
                    title: '请先选择预约时间',
                    icon: 'none',
                });
                return false;
            }
            uni.navigateTo({
                url:
                    '/pages/reserve/seat?studyhallId=' +
                    this.id +
                    '&seatTypeIds=' +
                    (this.seatTypeIds || []).join(',') +
                    '&startTime=' +
                    this.form.startTime +
                    '&usableCycleHour=' +
                    this.usableCycleHour +
                    '&usableCycleDay=' +
                    this.usableCycleDay,
            });
        },
        onSeatSelect({ seatId, seatName, startTime, reserveStartTime, endTime, reserveEndTime }) {
            this.form.seatId = seatId;
            this.form.seatName = seatName;
            this.form.startTime = startTime;
            this.form.reserveStartTime = reserveStartTime;
            this.form.reserveEndTime = reserveEndTime;
            this.form.endTime = endTime;
            this.replaceTime();
        },
        signFinish(url) {
            this.form.signPic = url;
        },
        changeStep(index) {
            if (this.activeStep > index) {
                this.activeStep = index;
            }
        },
        lastStep() {
            if (this.activeStep > 0) {
                if (this.usableCycleType === 0) this.activeStep = 0;
                if (this.usableCycleType === 1) this.activeStep--;
            }
        },
        nextStep() {
            if (this.activeStep === 0) {
                this.$refs.uForm.validate().then(() => {
                    if (this.usableCycleType === 0) this.activeStep = 2;
                    if (this.usableCycleType === 1) this.activeStep++;

                    if (this.usableCycleType === 1) {
                        this.$Api.study.protocol
                            .get({
                                studyhallId: this.id,
                                userCardIds: this.form.userCardIds.join(','),
                                reserveStartTime: this.form.startTime,
                                reserveEndTime: this.form.endTime,
                            })
                            .then(res => {
                                this.form.protocolTemplateId = res.id;
                                this.$refs.contract.setProtocol(res);
                            });
                    }
                });
            } else if (this.activeStep === 1 && this.usableCycleType === 1) {
                this.$refs.contract.getContractInfo().then(res => {
                    if (res) {
                        if (!this.form.signPic) {
                            uni.showToast({
                                title: '请完成签名',
                                icon: 'none',
                            });
                            return false;
                        }
                        this.form = {
                            ...this.form,
                            ...res,
                        };
                        this.activeStep++;
                    }
                });
            }
        },
        formatDay(val) {
            return dayjs(val).format('MM月DD日');
        },
        submitReserve() {
            if (!this.checked) {
                uni.showToast({
                    title: '请先阅读自习室公约',
                    icon: 'none',
                });
                return false;
            }
            this.$Api.study.reserve
                .create({
                    ...this.form,
                    studyhallId: this.id,
                })
                .then(res => {
                    uni.showToast({
                        title: '预定成功',
                        icon: 'none',
                    });
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/pages/reserve/success?orderId=' + res,
                        });
                    }, 2000);
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    .nav-list {
        width: 100%;
        background: #fff;
        border-radius: 24rpx;
        overflow: hidden;
        .step-list {
            margin-bottom: 26rpx;
            background: #f6f6f6;
            @include flexBox(space-between, center);
            .step-item {
                width: 260rpx;
                height: 80rpx;
                background: #f6f6f6;
                position: relative;
                &.two {
                    width: 340rpx;
                }
                .image {
                    width: 230rpx;
                    height: 106rpx;
                    position: absolute;
                    top: 0;
                }
                .inner {
                    width: 100%;
                    height: 100%;
                    color: #898989;
                    font-size: 28rpx;
                    font-weight: 600;
                    position: relative;
                    transition: 0.3s;
                    @include flexBox(center, center);
                    .circle {
                        width: 44rpx;
                        height: 44rpx;
                        background: #d4d4d4;
                        border-radius: 50rpx;
                        font-size: 28rpx;
                        font-weight: 600;
                        color: #898989;
                        margin-right: 12rpx;
                        transition: 0.3s;
                        @include flexBox(center, center);
                    }
                }
                &.active {
                    z-index: 100;
                    .inner {
                        color: #5428ec;
                    }
                    .circle {
                        color: #5428ec;
                        background: #e6dfff;
                    }
                }
            }
        }
        .hall-info {
            background: #fff;
            box-sizing: border-box;
        }
        .contract-info {
            background: #fff;
            padding: 20rpx 16rpx;
            box-sizing: border-box;
        }
    }
    .reserve-form {
        padding: 20rpx 32rpx;
        border-radius: 24rpx;
        box-sizing: border-box;
        margin-top: 20rpx;
        background: #fff;
        .time-select {
            padding-top: 22rpx;
            position: relative;
            @include flexBox(space-between, center);
            .desc {
                position: absolute;
                right: 0;
                top: -30rpx;
                font-size: 24rpx;
                color: #979797;
                @include flexBox(flex-start, center);
                .icon {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 10rpx;
                }
            }
            .date-time {
                @include flexBox(flex-start, center);
                .label {
                    font-size: 20rpx;
                    color: #979797;
                    margin-right: 12rpx;
                    white-space: nowrap;
                }
            }
            .text-area {
                width: 220rpx;
                height: 82rpx;
                border-radius: 8rpx;
                padding: 4rpx 4rpx 4rpx 20rpx;
                box-sizing: border-box;
                background: rgba(212, 212, 212, 0.2);
                @include flexBox(space-between, center);
                .left {
                    color: #979797;
                    font-size: 28rpx;
                    @include flexBox(flex-start, flex-start, column);
                }
            }
            .line {
                width: 40rpx;
                height: 1rpx;
                background: #898989;
                margin: 0 14rpx;
            }
        }
        .rules {
            margin-top: 20rpx;
            .desc {
                padding: 20rpx 28rpx;
                border-radius: 8rpx;
                background: rgba(212, 212, 212, 0.2);
                font-size: 24rpx;
                color: #898989;
                line-height: 34rpx;
            }
            .check-rule {
                font-size: 24rpx;
                color: #5c5c5c;
                margin-top: 36rpx;
                position: relative;
                .tips {
                    position: absolute;
                    left: -36rpx;
                    top: -80rpx;
                    .image {
                        width: 552rpx;
                        height: 74rpx;
                    }
                    .agree {
                        color: #fff;
                        margin-top: -66rpx;
                        margin-left: 16rpx;
                    }
                }
                .rule {
                    color: #5672c2;
                    text-decoration: underline;
                    margin-left: 10rpx;
                }
            }
        }
    }
    .service {
        padding: 20rpx 30rpx;
        .phone {
            font-size: 24rpx;
            color: #898989;
            text-decoration: underline;
        }
        .call {
            font-size: 28rpx;
            color: #ff29e9;
            margin-top: 10rpx;
        }
    }
    .footer-bar {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 20rpx;
        background: #fff;
        box-sizing: border-box;
        @include flexBox(space-between, center);
        .submit-reserve {
            width: 100%;
            @include flexBox(space-between, center);
            .total {
                font-size: 28rpx;
                font-weight: 600;
                color: #fa6400;
                line-height: 40rpx;
                .num {
                    margin: 0 10rpx;
                }
            }
            .btn-group {
                @include flexBox(flex-start, center);
            }
        }
    }
}
.card-popup {
    padding: 26rpx 30rpx;
    box-sizing: border-box;
    .title {
        font-size: 28rpx;
        font-weight: 600;
        color: #2f2f2f;
        padding-bottom: 12rpx;
        border-bottom: 1rpx solid #f1f1f1;
        @include flexBox(flex-start, center);
        .icon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 20rpx;
        }
    }
    .card-list {
        width: 100%;
        min-height: 54vh;
        max-height: 66vh;
        overflow-y: auto;
        .card-container {
            width: 100%;
            margin-top: 20rpx;
            @include flexBox(space-between, center);
            .select {
                margin-right: 10rpx;
            }
            .right {
                flex: 1;
                overflow: hidden;
            }
        }
    }
    .footer {
        font-size: 24rpx;
        padding-top: 20rpx;
        @include flexBox(space-between, center);
        .text {
            font-weight: 600;
            .num {
                margin: 0 10rpx;
            }
        }
    }
}
.rule-popup {
    padding: 26rpx 30rpx;
    .title {
        font-size: 28rpx;
        font-weight: 600;
        color: #2f2f2f;
        padding-bottom: 12rpx;
        border-bottom: 1rpx solid #f1f1f1;
        @include flexBox(flex-start, center);
        .icon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 20rpx;
        }
    }
    .rule-list {
        min-height: 54vh;
        max-height: 66vh;
        overflow-y: auto;
        padding: 28rpx 0;
        .head {
            font-size: 36rpx;
            font-weight: 600;
            color: #2f2f2f;
            margin-bottom: 10rpx;
        }
        .rule-content {
            margin-bottom: 60rpx;
            .rule-item {
                font-size: 24rpx;
                color: #5c5c5c;
                line-height: 44rpx;
            }
        }
    }
}
::v-deep .u-form {
    .u-form-item__body__right__message {
        text-align: right;
    }
}
</style>
